
/**
 * 总结
 * 1.编写组件其实就是编写原生js或者函数
 * 2.定义状态必须通过state实例属性的方法 提供一个对象 名称是固定的就叫做state
 * 3.修改state中的任何属性 都不可以通过直接赋值 必须走setState的方法 这个方法来自于继承得到
 * 4.这里的this关键字 很容易出现指向错误的问题 上面的写法是最推荐和最规范的 没有this的指向问题
 */
import React from "react"
class TestComponent extends React.Component {
  // 1.定义组件状态
  state = {
    // 在这里可以定义各种属性 全都是当前组件的状态
    name: 'cp teacher'
  }
  // 事件回调函数
  changeName = () => {
    // 3.修改state中的状态name
    // 注意：不可以直接做赋值修改 必须通过一个方法setState
    this.setState({
      name: '小帅'
    })
  }
  render () {
    // 2.使用状态
    return (
      <div>
        this is a TestComponent
        当前name为:{this.state.name}
        <button onClick={this.changeName}>修改state</button>
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <TestComponent></TestComponent>
    </div>
  )
}

export default App
